import Taro, {Component} from '@tarojs/taro'
import {connect} from '@tarojs/redux'
import {View, ScrollView, Input, Picker} from '@tarojs/components'
import './index.less'
import _pickBy from 'lodash/pickBy'
import _startsWith from 'lodash/startsWith'
import {AtTabBar, AtFab, AtList, AtListItem, AtNoticebar, AtIcon} from 'taro-ui'

@connect(({rentList, houseDetail, loading}) => ({
  rentList,
  houseDetail,
  loading
}))

export default class RentList extends Component {


  config = {
    navigationBarTitleText: ''
  }

  constructor(props) {
    super(props)
    this.state = {
      current: 0
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
    const {dispatch} = this.props;
    const {type} = this.$router.params;
    wx.setNavigationBarTitle({
      title: type === 'fdzz' ? '房东直租' : '厂房合租'
    })
    dispatch({type: 'rentList/initData'})
    // 获取列表数据
    dispatch({type: 'rentList/loadList'})
    dispatch({type: 'rentList/loadDistrict'})
  }

  choseListData(item) {
    const {dispatch} = this.props;
    dispatch({
      type: 'houseDetail/updateState',
      payload: {
        listData: {
          ...item
        }
      }
    })
    Taro.navigateTo({
      url: `/pages/houseDetail/index`
    })
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  // 下拉滚动
  onScrollToLower(e) {
    const {
      rentList, dispatch
    } = this.props;
    console.log('rentList', rentList)

    dispatch({
      type: 'rentList/loadList',
    })
    dispatch({
      type: 'rentList/updateState',
    })
  }

  render() {
    const {
      rentList, dispatch
    } = this.props;
    const {current} = this.state;
    const {
      listData, houseTypeRange, houseType, areaTypeRange, priceRangeType, districtTypeRange
    } = rentList;
    const updateState = (obj) => {
      dispatch({
        type: 'rentList/updateState',
        payload: {
          ...obj
        }
      })
    }

    const handleClick = (value) => {
      if (value === 1) {
        Taro.navigateTo({
          url: `/pages/myOrder/index`
        })
      }
    }
    return (
      <View className='rentList'>
        <View className='scheduleNear'>
          <View className='pick'>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={houseTypeRange} rangeKey="text"
                        onChange={(e) => {
                          dispatch({type: 'rentList/initData'})
                          updateState({houseType: houseTypeRange[e.detail.value]})
                          dispatch({type: 'rentList/loadList'})
                        }}
                >
                  <AtListItem
                    title={houseType.text}
                    arrow='bottom'
                  />
                </Picker>
              </AtList>
            </View>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={districtTypeRange} rangeKey="name"
                        onChange={(e) => {
                          dispatch({type: 'rentList/initData'})
                          updateState({districtType: districtTypeRange[e.detail.value]})
                          dispatch({type: 'rentList/loadList'})
                        }}
                >
                  <AtListItem
                    title='区域'
                  />

                </Picker>
              </AtList>
            </View>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={areaTypeRange} rangeKey="text"
                        onChange={(e) => {
                          dispatch({type: 'rentList/initData'})
                          updateState({areaType: areaTypeRange[e.detail.value]})
                          dispatch({type: 'rentList/loadList'})
                        }}
                >
                  <AtListItem
                    title='面积'
                  />
                </Picker>
              </AtList>
            </View>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={priceRangeType} rangeKey="text"
                        onChange={(e) => {
                          dispatch({type: 'rentList/initData'})
                          updateState({priceType: priceRangeType[e.detail.value]})
                          dispatch({type: 'rentList/loadList'})
                        }}
                >
                  <AtListItem
                    title='价格'
                  />
                </Picker>
              </AtList>
            </View>
          </View>
          <View className='firstList'>
            <ScrollView
              scrollY
              onScrollToLower={this.onScrollToLower.bind(this)}
              style="height:100%"
            >
              {
                listData.map((item, i) => <View className='listChild' key={i}
                                                onClick={this.choseListData.bind(this, item)}
                >
                  <View className='box_left'>
                    <image src={item.topImage}/>
                    <View className='box_text'>{item.rentType ? '可分租' : '整租'}</View>
                  </View>
                  <View className='box_right'>
                    <View className='adsName'>
                      {item.name}
                    </View>
                    <View className='detailAds'>
                      {item.address}
                    </View>
                    <View className='detailAds'>
                      <View className='detailArea'>{item.totalPrice == -1 ? item.totalPrice + '元/月' : '面议'} </View>
                      <View className='detailAds'>{item.totalArea} m²</View>
                    </View>
                  </View>
                </View>)
              }
            </ScrollView>
          </View>
        </View>
      </View>
    )
  }
}
